<template>
  <div>
    <v-form-designer ref="vfDesigner" :designer-config="designerConfig">
      <!-- 保存按钮 -->
      <template #customSaveButton>
        <el-button type="text" @click="saveFormJson">
          保存
        </el-button>
      </template>
    </v-form-designer>

    <!-- 系统表单信息 -->
    <el-dialog :title="formTitle" v-model="formOpen" width="500px" append-to-body>
      <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="表单名称" prop="formName">
          <el-input v-model="form.formName" placeholder="请输入表单名称" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
import { addForm, getForm, updateForm } from '@/api/flowable/form';
import { StrUtil } from '@/utils/StrUtil';

const vfDesigner = ref(null);
const formRef = ref(null);

const formTitle = ref('');
const formOpen = ref(false);
const form = reactive({
  formId: null,
  formName: null,
  formContent: null,
  remark: null,
});
const rules = reactive({
  formName: [{ required: true, message: '表单名称不能为空', trigger: 'blur' }],
});
const designerConfig = reactive({
  generateSFCButton: false,
  exportCodeButton: false,
  toolbarMaxWidth: 330,
  toolbarMinWidth: 300,
  formHeader: false,
});

const route = useRoute();
const router = useRouter();

onMounted(() => {
  const formId = route.query.formId;
  // console.log('onMounted');
  // console.log('formId---->', formId);
  if (StrUtil.isNotBlank(formId)) {
    getForm(formId).then((res) => {
      vfDesigner.value.setFormJson(JSON.parse(res.data.formContent));
      Object.assign(form, res.data);
    });
  } else {
    const initialFormJson = {
      widgetList: [],
      formConfig: {
        modelName: 'formData',
        refName: 'vForm',
        rulesName: 'rules',
        labelWidth: 80,
        labelPosition: 'left',
        size: '',
        labelAlign: 'label-left-align',
        cssCode: '',
        customClass: '',
        functions: '',
        layoutType: 'PC',
        onFormCreated: '',
        onFormMounted: '',
        onFormDataChange: '',
        onFormValidate: '',
      },
    };
    vfDesigner.value.setFormJson(initialFormJson);
  }
});

const saveFormJson = () => {
  const formJson = vfDesigner.value.getFormJson();
  form.formContent = JSON.stringify(formJson);
  formOpen.value = true;
};

const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      if (form.formId) {
        updateForm(form)
          .then(() => {
            ElMessage.success('修改成功');
            formOpen.value = false;
          })
          .catch(() => {});
      } else {
        addForm(form)
          .then(() => {
            ElMessage.success('新增成功');
            formOpen.value = false;
          })
          .catch(() => {});
      }
      // 关闭当前标签页并返回上个页面
      const obj = { path: '/flowable/form', query: { t: Date.now() } };
      router.push(obj);
    }
  });
};

const cancel = () => {
  formOpen.value = false;
};
</script>

<style lang="scss" scoped>
body {
  margin: 0;
}

.el-container.main-container {
  background: #fff;
  margin-left: 0 !important;
}
</style>